<template>
  <div class="category">
    <div
      class="catebt"
      v-for="(item,i) of picList"
      :key="i"
      :data-id="item._id"
      :id="i"
      @click="toCate"
    >
      <img v-lazy="item.img" :id="i" style="width:60px;height:60px;display: inline-block;" alt />
      <span :id="i" class="catesize">{{item.name}}</span>
    </div>
    <!-- <div style="height:50px;"></div> -->
    <!-- <div class="sheet" :style="{left:cateLeft}">
          <cate-sheet></cate-sheet>
    </div>-->
  </div>
</template>
<script>
import cate_sheet from "../components/cate_sheet";

export default {
  data() {
    return {
      count: 0,
      picList: null,
      l: 0,
      cateLeft: "50%"
    };
  },
  methods: {
    async getPicData(limit, fn) {
      let { data } = await this.axios.get(
        `?url=http%3a%2f%2fservice.avatar.adesk.com%2fv1%2favatar%2frecommend%3fadult%3d0%26first%3d1%26limit%3d5%26order%3d%26skip%3d${limit}`
      );
      fn(data);
    },
    toCate(e) {
      this.$router.push({
        name: "cate_sheet",
        params: {
          name: this.picList[e.target.id]
        }
      });
      // this.cateLeft=0
    }
  },
  mounted() {
    this.l = parseInt(Math.random() * 100);
    this.getPicData(this.l, data => {
      if (data.code == 0) {
        this.picList = data.res.category;
      }
    });
  },
  components: {
    "cate-sheet": cate_sheet
  }
};
</script>
<style scoped>
.sheet {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: 1s;
  /* background: pink; */
  /* left: 10%; */
}
.times {
  font-size: 14px;
  margin-top: -39px;
  color: #969799;
  margin-bottom: 30px;
}
.catesize {
  font-size: 14px;
  display: inline-block;
  padding: 15px;
}
.catebt {
  width: 43%;
  display: flex;
  align-items: center;
  margin: 10px;
  background: #fff;
  /* float: left; */
}
.category {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
